.home-page {
  height: 100vh;
  // background-image: url("http://xthk-edu-test.oss-cn-shenzhen.aliyuncs.com/public/20201130/1606702955865.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  .top-wrap {
    position: sticky;
    top: 0;
    .top-title {
      text-align: center;
      color: #000000;
      font-size: 37px;
    }
    .main-tabs {
      padding: 15px 130px 40px;
      display: flex;
      justify-content: space-between;
      .main-tabs-item {
        height: 70px;
        font-size: 32px;
        font-weight: 400;
        line-height: 50px;
        vertical-align: text-top;
        color: #303133;
        position: relative;
        &.active {
          font-size: 36px;
          font-weight: bold;
          line-height: 50px;
          color: #000000;
          &::after {
            content: ""; /*CSS伪类用法*/
            position: absolute; /*定位背景横线的位置*/
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background: #ff8000; /*宽和高做出来的背景横线*/
            width: 40px;
            border-radius: 200px;
            height: 8px;
          }
        }
      }
    }
  }
  .not-more {
    margin-bottom: 288px;
  }
  .content-wrap {
    flex: 1;
    overflow: hidden; 
    // position: relative;
    .home-swiper {
      width: 690px;
      height: 240px;
      margin: 0 auto 48px;
      transition: margin-top 0.4s;
      .swiper-wrap {
        width: 100%;
        height: 100%;
        border-radius: 16px;
        .slide-image {
          width: 100%;
          height: 100%;
          border-radius: 16px;
        }
      }
    }
    .swiper-hidden {
      margin-top: -288px;
    }
    // .list-wrap {
    //   height: 100%;
    //   position: flex;
    //   flex-direction: column;
    .sub-tabs {
      // position: sticky;
      // top: 0;
      display: flex;
      padding: 0 30px 38px;
      .sub-tabs-item {
        height: 50px;
        font-size: 28px;
        font-weight: 400;
        line-height: 40px;
        margin-right: 48px;
        // vertical-align: text-top;
        color: #303133;
        position: relative;
        &.active {
          font-size: 32px;
          font-weight: bold;
          line-height: 40px;
          color: #000000;
          &::after {
            content: ""; /*CSS伪类用法*/
            position: absolute; /*定位背景横线的位置*/
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background: #ff8000; /*宽和高做出来的背景横线*/
            width: 32px;
            border-radius: 200px;
            height: 6px;
          }
        }
      }
    }
    .list-scroll {
      // overflow-y: scroll;
      height: calc(100% - 88px);
      // flex: 1;
      // transition: height 1s;
      overflow: hidden;
      .list-content {
        padding: 0 30px;
        .border-box-use {
          margin-bottom: 32px;
          .list-item {
            // background-color: aquamarine;
            display: flex;
            align-items: flex-start;
            .item-left {
              flex: 1;
              width: 400px;
              padding-right: 36px;
              .title {
                font-size: 32px;
                font-weight: bold;
                color: #303133;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
              }
              .time {
                font-size: 24px;
                font-weight: 400;
                color: #606266;
                margin-top: 8px;
              }
              .desc {
                font-size: 24px;
                font-weight: 400;
                color: #606266;
                // width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-top: 24px;
              }
              .join {
                display: flex;
                align-items: center;
                margin-top: 16px;
                .avatar {
                  width: 184px;
                  height: 44px;
                }
                .text {
                  display: flex;
                  font-size: 24px;
                  font-weight: 400;
                  color: #303133;
                  .light {
                    color: #ff8000;
                  }
                }
              }
            }
            .item-right {
              width: 192px;
              height: 192px;
              border-radius: 16px;
              image {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
      .loading {
        padding: 20px 0 26px;
        font-size: 24px;
        color: #909399;
        text-align: center;
      }
      .empty-wrap {
        height: 900px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .empty-pic {
          width: 380px;
          height: 200px;
          margin-bottom: 32px;
        }
        .main {
          font-size: 32px;
          font-weight: bold;
          color: #333333;
          margin-bottom: 16px;
        }
        .tips {
          font-size: 28px;
          color: #909399;
          margin-bottom: 32px;
        }
      }
    }
    // }
  }
  .today-content-wrap {
    flex: 1;
    height: calc(100% - 300px);
    .list-content {
      padding: 0 30px;
      .border-box-use {
        margin-bottom: 32px;
        .top-item {
          // background-image: url("https://xthk-guarden.oss-cn-shenzhen.aliyuncs.com/vc-upload-1606982357062-2_%E7%BB%84%208422@2x.png");
          background-repeat: no-repeat;
          background-position: right 5% bottom 50%;
          background-size: contain;
          .time-title {
            width: 310px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 52px;
            color: #303133;
            margin-bottom: 8px;
          }
          .week {
            width: 310px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 36px;
            font-weight: 400;
            color: #303133;
            margin-bottom: 12px;
          }
          .desc {
            width: 310px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 28px;
            font-weight: 400;
            color: #303133;
            margin-bottom: 40px;
          }
          .check-in {
            display: inline-block;
            height: 56px;
            background-color: #ffeea9;
            border-radius: 100px;
            font-size: 28px;
            font-weight: 400;
            line-height: 56px;
            color: #a13d0f;
            padding-left: 32px;
            padding-right: 32px;
          }
          .check-in-todo {
            padding-left: 66px;
            // background-image: url("https://xthk-guarden.oss-cn-shenzhen.aliyuncs.com/vc-upload-1606982357062-3_%E7%BB%84%208583@2x.png");
            background-repeat: no-repeat;
            background-position: left 3% bottom 50%;
            background-size: 50px;
          }
        }
        .list-item {
          // background-color: aquamarine;
          display: flex;
          align-items: center;
          .item-left {
            flex: 1;
            width: 390px;
            padding-right: 36px;
            .time {
              font-size: 32px;
              font-weight: bold;
              color: #303133;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin-bottom: 8px;
            }
            .desc {
              font-size: 24px;
              font-weight: 400;
              color: #606266;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin-bottom: 24px;
            }
            .theme {
              font-size: 24px;
              font-weight: 400;
              color: #606266;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .item-right {
            .btn {
              width: 244px;
              height: 72px;
              // background-image: url("https://xthk-guarden.oss-cn-shenzhen.aliyuncs.com/vc-upload-1606984583536-2_%E7%9F%AD%E6%A9%99@2x.png");
              background-repeat: no-repeat;
              background-size: contain;
              text-align: center;
              font-size: 32px;
              font-weight: bold;
              line-height: 72px;
              color: #ffffff;
              &.dis {
                opacity: 0.4;
                pointer-events: none;
              }
            }
          }
        }
      }
      .today-empty {
        margin-top: 136px;
        padding-top: 232px;
        font-size: 28px;
        font-weight: 400;
        line-height: 40px;
        color: #909399;
        text-align: center;
        // background-image: url("http://xthk-edu-test.oss-cn-shenzhen.aliyuncs.com/1607218643987_0.10254894567532302");
        background-position: top center;
        background-size: 380px 200px;
        background-repeat: no-repeat;
      }
      .today-empty-btn {
        width: 300px;
        height: 88px;
        background-repeat: no-repeat;
        background-size: contain;
        text-align: center;
        font-size: 32px;
        font-weight: bold;
        line-height: 88px;
        color: #ffffff;
        margin: 48px auto 0;
      }
    }
  }
  // .teacher-pop {
  //   width: 578px;
  //   height: 628px;
  //   background-image: url("http://xthk-edu-test.oss-cn-shenzhen.aliyuncs.com/public/20201130/1606702907416.png");
  //   background-size: 100% auto;
  //   background-repeat: no-repeat;
  //   overflow: hidden;
  //   .title {
  //     font-size: 40px;
  //     font-weight: bold;
  //     color: #a13d0f;
  //     text-align: center;
  //     margin-top: 16px;
  //   }
  //   .text {
  //     font-size: 32px;
  //     font-weight: bold;
  //     color: #303133;
  //     text-align: center;
  //     margin-top: 80px;
  //   }
  //   .img-wrap {
  //     width: 320px;
  //     height: 320px;
  //     margin: 48px auto 0;
  //     .QR-code {
  //       width: 100%;
  //       height: 100%;
  //     }
  //   }
  // }
  // .teacher-btn-img {
  //   width: 160px;
  //   height: 168px;
  //   position: fixed;
  //   z-index: 3;
  //   bottom: 82px;
  //   right: 16px;
  // }
}
